<template>
  <div
      class="container"
      :style="{
        top: '0%',
        left: '0%',
        width: '100%',
        height: '100%',
        opacity: visible ?  1 : 0,
        }"
  >

    <div style="width: 100%; text-align: center;">
      <p class="end-title" :style="{color: titleColor}">达成结局: {{ endingtitle }}</p>
      <p class="end-desc">{{ endingdesc }}</p>
      <p class="end-tip" v-show="isFailEnding">将在{{ countTime }}秒后自动进入故事线</p>
    </div>

  </div>
</template>
<script>

export default {
  computed: {
    isFailEnding(){
      return this.endingtype == 1;
    },
    titleColor() {
      if (this.endingtype == 1) {
        //失败结局
        return '#e30012'
      } else if (this.endingtype == 2) {
        //成功结局
        return '#FD5439'
      }
      return '#FD5439'
    }
  },
  methods: {
    //开始倒计时
    startCountDown() {
      this.timer = setInterval(() => {
        this.countTime--;
        if (this.countTime === 0) {
          //倒计时完毕继续播放，自动进入故事线
          this.bridge.invoke('player', 'resume');
          clearInterval(this.timer);
          this.hide();
        }
      }, 1000);
    }
  },
  mounted() {
    //打印时间戳
    let duration;
    this.bridge.invoke('player', 'getDuration').then(v => {
      duration = v * 1000;
      console.log('视频时长:', duration)
    });

    var isShow = false;
    this.bridge.on('player', 'timeupdate', time => {
      let miliSec = time * 1000 // 单位统一成毫秒
      // 由于部分设备取时间不准确 建议采用以下方式 结束前200ms判断为结束。
      if (duration > 0 && miliSec >= (duration - 500)) {
        if (this.visible || isShow) return
        isShow = true
        console.log('播放结束,开始显示结局',this.endingtype)
        this.bridge.invoke('player', 'pause');
        this.show();
        if(this.endingtype == 1){
          this.startCountDown();
        }
      }
    });
  },
  data() {
    return {
      countTime: 5,
    }
  }
};
</script>
<style>
.container {
  position: absolute;
  transition: opacity 0.5s ease;
  background-color: #000000e6;
}

.end-title {
  width: 100%;
  font-weight: bold;
  font-size: 0.8rem;
  margin-top: 20%;
}


.end-desc {
  width: 100%;
  font-size: 0.5rem;
  color: white;
  margin-top: 30%;
}

.end-tip {
  width: 100%;
  margin-top: 46%;
  font-size: 0.3rem;
  color: #eeeeee;
}

p {
  z-index: 2;
  position: absolute;
  text-align: center;
}


</style>
